<template>
  <div class="search-content" :style="{top: GLOBAL.currentEnvironment ? '0' : ''}">
    <!-- <Navbar :appTitle="title" :rtitle="rtitle" :rname="rname" /> -->
    <Search
      ref="topSearch"
      class="search"
      placeholder="工单编号|生产物料|批次编号"
      :isAdd="false"
      :isScreen="false"
      :isType="false"
    ></Search>
    <div class="formgroup">
      <span class="title">工单编号</span>
      <van-field v-model="params.orderCode" label="" placeholder="请输入"/>
      <div class="bottomLine"></div>
      <span class="title">批次编号</span>
      <van-field v-model="params.batchCode" label="" placeholder="请输入" />
      <div class="bottomLine"></div>
      <span class="title">生产物料</span>
      <van-field v-model="params.goodsName" label="" placeholder="请输入"/>
      <div class="bottomLine"></div>
      <span class="title">规格</span>
      <van-field v-model="params.spec" label="" placeholder="请输入"/>
      <div class="bottomLine"></div>
      <span class="title">操作人</span>
      <van-field
        :is-link="!operatorName"
        readonly
        name="picker"
        v-model="operatorName"
        @click="operatorVisible = true"
        placeholder="请选择"
      >
        <div slot="right-icon" v-show="!!operatorName" @click.stop="confirmChooseUsers('','',true)"><img src="~@/assets/img/filedClear.png" alt="" style="width:0.16rem"></div>
      </van-field>
      <div class="bottomLine"></div>
      <span class="title">提交人</span>
      <van-field
        :is-link="!createdByName"
        readonly
        name="picker"
        v-model="createdByName"
        @click="ddthrVisible = true"
        placeholder="请选择"
      >
        <div slot="right-icon" v-show="!!createdByName" @click.stop="confirmDdtjr('','',true)"><img src="~@/assets/img/filedClear.png" alt="" style="width:0.16rem"></div>
      </van-field>
      <div class="bottomLine"></div>
      <span class="title">提交时间</span>
      <van-field
        :is-link="!applyTimeRead"
        readonly
        name="picker"
        v-model="applyTimeRead"
        @click="applyDateStartVisible = true"
        placeholder="请选择"
      >
        <div slot="right-icon" v-show="!!applyTimeRead" @click.stop="cancelApplyStartTime"><img src="~@/assets/img/filedClear.png" alt="" style="width:0.16rem"></div>
      </van-field>
    </div>
    <div class="search-bottom">
      <span class="btncancel" @click="cancel">重置</span>
      <span class="btnconfirm" @click="confirm">确定</span>
    </div>

    <!--计划完成时间开始时间 -->
    <van-popup v-model="applyDateStartVisible" position="bottom" :close-on-click-overlay='false'>
      <van-datetime-picker
        @confirm="confirmApplyStartTime"
        @cancel="cancelApplyStartTime"
        type="date"
        title="计划完成开始时间"
        v-model="minDate"
        :formatter="formatter"
      />
    </van-popup>
    <!--计划完成时间结束时间 -->
    <van-popup v-model="applyDateEndVisible" position="bottom" :close-on-click-overlay='false'>
      <van-datetime-picker
        @confirm="confirmApplyEndTime"
        @cancel="cancelApplyEndTime"
        type="date"
        title="计划完成结束时间"
        :min-date="applyEndMinDate"
        :formatter="formatter"
      />
    </van-popup>
    <contact-pickers :visible="operatorVisible" :max="5" @closePicker="operatorVisible = false" @confirm="confirmChooseUsers">
    </contact-pickers>
    <contact-pickers :visible="ddthrVisible" :max="5" @closePicker="ddthrVisible = false" @confirm="confirmDdtjr">
    </contact-pickers>
  </div>
</template>

<script>
const formP = {
  applicantId: "",
  operatorId: "",
  applyTimeBegin: "",
  applyTimeEnd: "",
};
import Navbar from "@/components/navBar/navBar_right";
import ContactPickers from "@/components/choiceuse/ContactPickers";
import upload from "@/components/upload/upload";
import moment from "moment";
import Search from "@/components/search";
export default {
  name: "search",
  components: { Navbar, ContactPickers, upload, Search },
  data() {
    return {
      title: this.$route.meta.title,
      operatorVisible: false,
      ddthrVisible: false,
      applyDateStartVisible: false,
      applyDateEndVisible: false,
      createdTimeEndVisible: false,
      operatorName: "", //操作人
      createdByName: "", //订单提交人
      rtitle: "",
      rname: "", //search
      minDate: new Date(),
      applyEndMinDate: new Date(2020, 1, 1),
      params: Object.assign({}, formP),
      applyTimeRead: ''
    };
  },
  props: {
    keyword: {
      type: String,
      default: ''
    }
  },
  watch: {
    keyword(newVal) {
      this.$refs.topSearch.value = newVal
    }
  },
  computed: {},
  mounted() {},
  created() {},
  methods: {
    // 选择开始时间
    confirmApplyStartTime(date) {
      this.applyEndMinDate = date
      this.params.applyTimeBegin = moment(date).startOf('day').format('YYYY-MM-DD HH:mm:ss');
      this.params.applyTimeEnd = ""; // 切换开始时间后直接置空结束时间重新选择
      this.applyDateStartVisible = false;
      this.applyDateEndVisible = true;
      this.applyTimeRead = moment(date).format('YYYY-MM-DD')
    },
    // 取消开始时间
    cancelApplyStartTime() {
      this.params.applyTimeBegin = "";
      this.params.applyTimeEnd = "";
      this.applyTimeRead = "";
      this.applyDateStartVisible = false;
    },
    // 选择结束时间
    confirmApplyEndTime(date) {
      this.params.applyTimeEnd = moment(date).endOf('day').format('YYYY-MM-DD HH:mm:ss');
      this.applyTimeRead = this.applyTimeRead + '~' + moment(date).format('YYYY-MM-DD')
      this.applyDateEndVisible = false;
    },
    // 取消结束时间
    cancelApplyEndTime() {
      this.params.applyTimeBegin = "";
      this.params.applyTimeEnd = "";
      this.applyTimeRead = "";
      this.applyDateEndVisible = false;
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      // if (type === "hour") {
      //   return val + "时";
      // }
      // if (type === "minute") {
      //   return val + "分";
      // }
      return val;
    },
    confirmChooseUsers(val, selectedList, judge) {
      this.params.operatorId = "";
      this.operatorName = "";
      if (judge) {
        this.operatorVisible = false;
        return;
      }
      this.params.operatorId = val ? val : ""; //人员id
      let arr = [];
      if (selectedList) {
        selectedList.forEach((item) => {
          arr.push(item.realname);
        });
      }
      this.operatorName = arr.join(",");
      this.operatorVisible = false;
    },
    confirmDdtjr(val, selectedList, judge) {
      this.params.applicantId = "";
      this.createdByName = "";
      if (judge) {
        this.ddthrVisible = false;
        return;
      }
      this.params.applicantId = val ? val : ""; //人员id
      let arr = [];
      if (selectedList) {
        selectedList.forEach((item) => {
          arr.push(item.realname);
        });
      }
      this.createdByName = arr.join(",");
      this.ddthrVisible = false;
    },
    cancel() {
      this.applyTimeRead = "";
      this.createdByName = "";
      this.operatorName = "";
      this.minDate = new Date()
      this.params = Object.assign({}, formP);
      this.$refs.topSearch.value = ''
    },
    confirm() {
      var keyword = this.$refs.topSearch.value
      this.$emit("getCategory", this.params, keyword);
    },
  },
};
</script>
<style lang="scss" scoped>
.search-content {
  //  padding-bottom: 0.5rem;
  position: fixed;
  top: 0.35rem;
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  overflow: scroll;
  z-index: 999;
  .formgroup {
    // height: calc(100vh - 1.11rem);
    padding-bottom: 0.53rem;
    overflow-y: scroll;
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }
  .search-bottom {
    height: 0.5rem;
    width: 100%;
    background: #ffffff;
    // background: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 0.11rem;
    font-size: 0.16rem;
    .btnconfirm {
      width: 1.72rem;
      height: 0.39rem;
      background: #1890ff;
      color: #fff;
      border-radius: 0.03rem;
      text-align: center;
      line-height: 0.39rem;
    }
    .btncancel {
      width: 1.72rem;
      height: 0.39rem;
      background: #F6F6F6;
      color: #191F25;
      // border: 0.01px solid rgba(25, 31, 37, 0.12);
      border-radius: 0.03rem;
      text-align: center;
      line-height: 0.39rem;
    }
  }
}
.bottomLine {
  height: 0.01rem;
  background-color: #f0f0f0;
  margin: 0 0.16rem 0.14rem;
}
</style>